<template>
  <el-dialog class="select-users--dialog" center width="800px" :title="title" :visible="visible" @close="close">
    <div>
      <SelectUsers
        v-model="currentValue"
        v-bind="$attrs"
      />
    </div>
    <div slot="footer" class="select-users-dialog__footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>


<script>
import SelectUsers from './components/index.vue';
export default {
  components: {
    SelectUsers,
  },
  data() {
    return {
      currentValue: null,
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Array, String, Number],
      default: null,
    },
    title: {
      type: String,
      default: '人员选择'
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (this.multiple) {
          if (val && val.length > 0) {
            this.currentValue = [...val];
          } else {
            this.currentValue = [];
          }
          return;
        }
        this.currentValue = val;
      }
    },
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('input', this.currentValue);
      this.close();
    },
  }
}
</script>